<template>
  <div class="container">
    <h1>color:{{ color }}</h1>
    <h1>per:{{ per }}</h1>
    <h1>r:{{ r }}</h1>
    <h1>dasharray:{{ dasharray }}</h1>
    <div id="cycle">
      <svg
        width="100%"
        height="100%"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
      >
        <circle
          cx="200"
          cy="200"
          :r="r"
          :stroke="color"
          stroke-width="10"
          fill="none"
          :stroke-dasharray="dasharray"
          stroke-linecap="round"
        />
      </svg>
    </div>
  </div>
</template>
<script>
import { computed, reactive, ref } from "vue";
export default {
  props: {
    color: {
      type: String,
      default: "black",
    },
    per: {
      type: Number,
      default: 0.001,
    },
  },
  setup(props) {
    const r = ref("50");

    const dasharray = computed(() => {
      let l = 2 * Math.PI * r.value;
      let num1 = l * props.per;
      let num2 = l - num1;
      return num1 + "," + num2;
    });

    return { r, dasharray };
  },
};
</script>
<style lang="scss" scoped>
.container {
  #cycle {
    width: 400px;
    height: 400px;
    border: 2px solid red;
    svg {
      circle {
        transition: 0.5s; //动画
        transform-origin: center;
        transform: rotateZ(-90deg);
      }
    }
  }
}
</style>